<template>
	<view class="page">
		<comHead :datas="datasObj"> <template #headerContent> </template> </comHead>
		<view class="content_box pd-30">
			<view class="userLog_box bd-r40 pd-20">
				<view class="ft-28 c-33 fw-800">基础信息</view>
				<view class="profile_box flex-c-center">
					<view class="profile_content">
						<view class="bg_view flex-center">
							<image class="img bd-r50c"
								:src="info.avatar ?? 'https://cdn.oss.bon-top.cn/static_bc/images/avtor.png'"
								mode="scaleToFill" @click="openImg(0, [info.avatar])" />
							<image class="img_p" src="https://cdn.oss.bon-top.cn/static_bc/images/edit-icon.png"
								mode="aspectFit" @click="openUploadBtn(1)"></image>

						</view>
					</view>
					<view class="profile_text ft-24 c-66" @click="openUploadBtn(1)">点击编辑头像</view>
				</view>
				<view class="title_box bd-r20 pd-20 mt-20">
					<view class="ft-28 c-33 fw-800 flex-bwt"><text>我的标签</text>
						<view class="flex ft-24 c-99" @click.stop="goTags(0)">编辑
							<image class="icon_samll" src="https://cdn.oss.bon-top.cn/static_bc/images/edit_icon2.png"
								mode="aspectFit">
							</image>
						</view>
					</view>
					<view class="tags_box mt-20" v-if="tagList.length > 0">
						<view class="tags_box_item ft-24 c-33 flex-center" v-for="tag in tagList" :key="tag">{{
							tag.name }}
						</view>
					</view>
					<view class="title_box_btn ft-24 c-33 flex-center" v-else @click.stop="goTags(0)">
						<image class="icon_samll mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png"
							mode="aspectFit">
						</image>
						添加标签
					</view>

				</view>
				<view class="list_box mt-20">
					<template v-for="item in basicList" :key="item.id">
						<view class="list_box_item" v-if="item.key == 'names'">
							<view class="list_box_item_label">{{ item.name }}</view>
							<view class="list_box_item_content flex-bwt"
								@click="item.key == 'names' ? editToPage(item.name, item) : editOpen()">
								<view class="content_text">{{ info[item.key] || '请选择' }}</view>
								<image class="icon_samll mr-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<picker mode="selector" v-else-if="item.key == 'sex' || item.key == 'constellation'"
							:value="item.val" :range="optionsList[item.list]" @change="changeIntention($event, item)">
							<view class="list_box_item">
								<view class="list_box_item_label">{{ item.name }}</view>
								<view class="list_box_item_content flex-bwt">
									<view class="content_text">{{ info[item.key] || '请选择' }}</view>
									<image class="icon_samll mr-4"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
										mode="aspectFit">
									</image>
								</view>

							</view>
						</picker>
						<picker mode="region" v-else :value="item.val" @change="changeIntention($event, item)">
							<view class="list_box_item">
								<view class="list_box_item_label">{{ item.name }}</view>
								<view class="list_box_item_content flex-bwt">
									<view class="content_text">{{ info[item.key + 'Str'] || '请选择' }}</view>
									<image class="icon_samll mr-4"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
										mode="aspectFit">
									</image>
								</view>
							</view>
						</picker>

					</template>

				</view>
			</view>
			<view class="otherMsg_box  bd-r40 pd-20 mt-20">
				<view class="ft-28 c-33 fw-800">其它信息</view>
				<view class="otherMsg_box_list mt-20">

					<template v-for="item in otherMsgList" :key="item.id">
						<view class="otherMsg_box_list_item"
							v-if="item.key !== 'product_ids' && item.key !== 'brand_id'"
							@click="editToPage(item.name, item)">
							<view class="otherMsg_box_list_item_label">{{ item.name }}</view>
							<view class="otherMsg_box_list_item_content flex-bwt">
								<view class="content_text">{{ info[item.key] || '请选择' }}</view>
								<image class="icon_samll mr-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<!-- 擅长项目 -->
						<view class="otherMsg_box_list_item" v-if="item.key == 'product_ids'" @click="goTags(1)">
							<view class="otherMsg_box_list_item_label">{{ item.name }}</view>

							<view class="otherMsg_box_list_item_content flex-bwt">
								<view class="content_text" v-if="info[item.key]">
									已选择
									<text style="color:#1F18EE;">
										({{ info[item.key].length }})
									</text>
								</view>
								<view class="content_text" v-else> 请选择 </view>
								<image class="icon_samll mr-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>

						</view>
						<!-- 所在企业 -->
						<view class="otherMsg_box_list_item" v-if="item.key == 'brand_id'" @click="toPage()">
							<view class="otherMsg_box_list_item_label">{{ item.name }}</view>

							<view class="otherMsg_box_list_item_content flex-bwt">
								<view class="content_text">{{ info[item.key + 'Str'] || '请选择' }}</view>
								<image class="icon_samll mr-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" mode="aspectFit">
								</image>
							</view>
						</view>

					</template>
				</view>
			</view>

			<view class="briefMsg_box bd-r20 pd-20 mt-20">
				<view class="ft-28 c-33 fw-800 flex-bwt"><text>简介</text>
					<view class="flex ft-24 c-99" @click="editToPage('编辑简介', { key: 'des' })">编辑
						<image class="icon_samll" src="https://cdn.oss.bon-top.cn/static_bc/images/edit_icon2.png"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="textarea_box mt-20 bd-r20" v-if="info.des.length">
					<textarea class="textarea bd-r20 ft-24 c-66" v-model="info.des" placeholder=""
						placeholder-class="textarea-placeholder" maxlength="-1" @input="" />
				</view>
				<view class="briefMsg_box_btn ft-24 c-33 flex-center" v-else
					@click="editToPage('编辑简介', { key: 'des' })">
					<image class="icon_samll mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/edit_icon3.png"
						mode="aspectFit">
					</image>
					还没有简介去编辑吧~
				</view>

			</view>
			<view class="videoList_box bd-r20 pd-20 mt-20">
				<view class="ft-28 c-33 fw-800 flex-bwt">视频介绍</view>
				<view class="img_model bd-r20 mt-20 pd-20">
					<text class="ft-24 c-99">添加视频({{ info.files != '' ? 1 : 0 || 0 }}/1) </text>
					<view class="imgBox mt-30">
						<view class="img_list">
							<view class="videoItem" v-if="info.files != ''">
								<video :src="info.files" :controls="false" :playsinline="true" webkit-playsinline
									class="preview-video"></video>

								<image class="icon_samll icons"
									src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit"
									@click="deleteVideo()" />
							</view>

							<view class="imgUpload flex-center" @click="openUploadBtn(0)" v-if="info.files == ''">
								<image class="icon_samll deg-90"
									src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png" mode="aspectFit">
								</image>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="imageList_box bd-r20 pd-20 mt-20">
				<view class="ft-28 c-33 fw-800 flex-bwt">图片介绍</view>
				<view class="img_model bd-r20 mt-20 pd-20">
					<text class="ft-24 c-99">添加图({{ info.images.length || 0 }}/9) </text>
					<view class="imgBox mt-30">
						<view class="img_list">
							<view class="imgItem" v-for="(item, index) in info.images" :key="index">
								<image class="imgs  bd-r20" :src="item" @click="openImg(index, info.images)"
									mode="aspectFill" />
								<image class="icon_samll icons"
									src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit"
									@click="deleteImg(index, item)" />
							</view>
							<view class="imgUpload flex-center" @click="openUploadBtn(2)" v-if="info.images.length < 9">
								<image class="icon_samll deg-90"
									src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png" mode="aspectFit">
								</image>
							</view>
						</view>
					</view>

				</view>

			</view>

		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>
		<view class="btn_box">
			<view class="center ft-22 c-99 mt-10">资料提交后<text class="c-33 fw-800">“48小时”</text>完成审核</view>
			<view class="box" style="height: 98rpx;">

				<view class="btn add" @click="submit()">提交审核</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
let datasObj = reactive({
	title: '编辑信息',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 88
})
const info = reactive({
	avatar: '',
	des: '',
	images: [],
	files: '',
	names: '',
	sex: '',
	constellation: '',
	area: [],
	place: [],
	tag_ids: [],
	experience: '',
	service_time: '',
	product_ids: '',
	brand_id: '',
	brand_idStr: ''
})

const tagList = ref([])
const productList = ref([])
const basicList = ref([
	{ id: 1, name: '中英名称', key: 'names', },
	{ id: 2, name: '性别', key: 'sex', list: 'sex_list', val: 0 },
	{ id: 3, name: '星座', key: 'constellation', list: 'constellation_list', val: 0 },
	{ id: 4, name: '现在地区', key: 'area', val: [] },
	{ id: 5, name: '籍贯', key: 'place', val: [] },

])
const otherMsgList = ref([
	{ id: 1, name: '从业经验', key: 'experience', },
	{ id: 2, name: '服务时间', key: 'service_time', },
	{ id: 3, name: '擅长项目', key: 'product_ids', },
	{ id: 4, name: '所在企业', key: 'brand_id', },

])
const cityList = ref(['广东省', '广州市', '海珠区'])
let userInfo = uni.getStorageSync('userInfo')
// let basicList

const submit = () => {
	console.log('info.brand_id', info.brand_id)
	if (!info.brand_id) return uni.showToast({ title: '请选择所在企业',icon:'none' })
	let str = info.names.replace(/[a-zA-Z]/g, '')
	let eng = info.names.replace(/[\u4e00-\u9fa5]/g, '')
	console.log('str', str)
	console.log('eng', eng)
	console.log('info.names', info.names)
	let obj = {
		...info
	}
	obj.nickname = str
	obj.en = eng

	utils.request(api.submitSaleEdit, obj, "post").then(res => {
		if (res.code == 200) {
			uni.showToast({
				title: '编辑成功',
				icon: 'none'

			})
			console.log('userInfo', userInfo)
			uni.navigateTo({ url: '/subpackage/teacher/teacherDetail?id=' + userInfo.sale_id })
		}
	})
}
const changeIntention = (e, item) => {
	console.log('e', e, item)
	if (item.key == 'sex' || item.key == 'constellation') {

		info[item.key] = optionsList.value[item.list][e.detail.value]
	} else if (item.key == 'area' || item.key == 'place') {
		info[item.key] = e.detail.value
		info[item.key + 'Str'] = e.detail.value.join('-')

	}

}
const toPage = () => {
	uni.navigateTo({
		url: '/subpackage/brandParty/brandPartyInfo',
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getProject: function (data) {
				console.log(data)
				info.brand_id = data.id
				info.brand_idStr = data.name
			},
		},
		success: function (res) {
			// 通过eventChannel向被打开页面传送数据
			res.eventChannel.emit('dataFun', { id: info.brand_id })
		}
	})
}
const goTags = (type) => {
	uni.navigateTo({
		url: '/subpackage/teacher/editUserTags',
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getTags: function (data) {
				console.log(data)
				if (data.type == 'product') {
					productList.value = data.tags
					info.product_ids = data.ids
					console.log('项目')
				} else if (data.type == 'tag') {
					tagList.value = data.tags
					info.tag_ids = data.ids
					console.log('哈哈哈')
				}
				console.log('数据', tagList.value)
			},
		},
		success: function (res) {
			// 通过eventChannel向被打开页面传送数据
			let arr = type == 1 ? productList.value : tagList.value
			res.eventChannel.emit('tagsData', { tags: arr, type: type == 0 ? 'tag' : 'product' })
		}
	})
}
const editToPage = (title, item) => {
	uni.navigateTo({
		url: `/subpackage/teacher/editUserMsg`,
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getInput: function (data) {
				console.log(data)
				info[data.key] = data[data.key]
				console.log()

			},
		},
		success: function (res) {
			// 通过eventChannel向被打开页面传送数据
			let infoItem = info[item.key]
			console.log('infoItem', info, item.key, infoItem)
			item[item.key] = infoItem
			res.eventChannel.emit('editData', { title, ...item })
		}
	},

	)
}
const uploadType = ref(0)
const openUploadBtn = (type) => {
	// 打开选项弹窗 没有选择数据的 情况
	//type 1,2 图片 0视频
	uploadType.value = type
	upload()
}
// 删除图片
const deleteImg = (index, item) => {
	info.images = info.images.filter((f, i) => i !== index)
}
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
// 删除图片
const deleteVideo = () => {
	info.files = ''
}
const maxLength = ref(9)

const upload = async () => {
	//视频
	if (!uploadType.value) {
		const res = await uni.chooseVideo({
			sourceType: ['album', 'camera'],
			compressed: false // iOS需关闭压缩避免兼容性问题‌:ml-citation{ref="1,4" data="citationList"}
		})
		let obj = {
			url: res.tempFilePath,
			name: 'file',
			type: 'file'
		}
		const result = await uploadFilePromise('uploadVideo', obj);
		info.files = result
	} else {
		// 图片
		const res = await uni.chooseImage({
			sizeType: ['original'], // iOS需保留原图避免压缩异常‌:ml-citation{ref="3" data="citationList"}
			sourceType: ['album', 'camera']
		})
		// 多图片添加

		console.log('res', res)
		if (uploadType.value == 1) {
			let obj = {
				url: res.tempFilePaths[0],
				name: 'image',
				type: 'image'
			}
			const result = await uploadFilePromise('uploadImage', obj);
			info.avatar = result
		} else {
			let list = res.tempFilePaths.slice(0, Number(maxLength.value - info.images.length))
			for (let i = 0; i < list.length; i++) {
				let obj = {
					url: list[i],
					name: 'image',
					type: 'image'
				}
				const result = await uploadFilePromise('uploadImage', obj);
				info.images.push(result)
			}
		}

		console.log('info', info.avatar)



	}
}
const optionsList = ref([])
const getSaleEditOptions = () => {
	utils.request(api.getSaleEditOptions, {
	}, "get").then(res => {
		optionsList.value = res.data.info

	})
}
onLoad(() => {
	getSaleEditOptions()
	getSaleDetailData()
})
const teacherDetail = ref({})
const getSaleDetailData = () => {
	console.log('userInfo', userInfo)
	utils
		.request(
			api.getSaleDetail, {
			id: userInfo.sale_id
		},
			"get"
		)
		.then((res) => {
			teacherDetail.value = res.data.info;
			let infoKeys = Object.keys(info)
			let keysObj = ['avatar', 'des', 'images', 'files', 'experience', 'service_time']

			for (let key in teacherDetail.value) {
				let nickname = teacherDetail.value['nickname']
				let en = teacherDetail.value['en']
				let names = (nickname + en).replace(/\s+/g, '')
				// 单独处理的键
				if (keysObj.includes(key)) {
					if (key == 'files') {
						info[key] = teacherDetail.value[key].length ? teacherDetail.value[key][0] : info[key]

					} else {

						info[key] = teacherDetail.value[key] ? teacherDetail.value[key] : info[key]
					}
				}
				else {
					switch (key) {
						case 'tags':
							info.tag_ids = teacherDetail.value[key].reduce((a, b) => {
								a.push(b.id)
								return a
							}, [])
							tagList.value = teacherDetail.value[key]
							break;

						case 'nickname':
						case 'en':
							info.names = names ? names : info[key]
							break;

						case 'products':
							info.product_ids = teacherDetail.value[key].reduce((a, b) => {
								a.push(b.id)
								return a
							}, [])
							productList.value = teacherDetail.value[key]
							break;

						case 'sex':
						case 'constellation':
							let b_item = basicList.value.find(f => f.key == key)
							// console.log('===>',optionsList.value[b_item.list])
							b_item.val = optionsList.value[b_item.list].findIndex(f => f == teacherDetail.value[key])
							info[key] = teacherDetail.value[key]
							break;

						case 'area':
						case 'place':
							b_item = basicList.value.find(f => f.key == key)
							b_item.val = teacherDetail.value[key]
							info[key] = teacherDetail.value[key]
							info[key + 'Str'] = teacherDetail.value[key].join('-')
							break;

						case 'brand_id':
							info.brand_id = teacherDetail.value[key]
							info.brand_idStr = teacherDetail.value['brand_info']?.name || ''
							break;



					}
				}
			}
			console.log('info', info)

		});
};
const uploadFilePromise = (path, data) => {
	uni.showLoading({
		title: '请稍候...'
	})
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: utils.domain + '/api/v1/button.' + path,
			filePath: data.url,
			name: data.name,
			fileType: data.type,
			formData: {
				app_id: utils.app_id,
				identity: utils.identity,
			},
			header: {
				'Authorization': utils.getToken()
			},
			success: (res) => {
				uni.hideLoading()
				const resData = JSON.parse(res.data)
				resolve(resData.data.info.url);
			},
		});
	});
};
</script>

<style lang="scss">
.content_box {

	.briefMsg_box,
	.otherMsg_box,
	.imageList_box,
	.videoList_box,
	.userLog_box {
		background-color: #F8F8F8;

	}

	.userLog_box {

		.profile_box {
			.bg_view {

				width: 136rpx;
				height: 136rpx;
				border: 2rpx solid #DBF046;
				border-radius: 50%;
				margin-bottom: 20rpx;
				position: relative;



				.img_p {
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					bottom: -2rpx;
					right: 2rpx;
				}

				.img {
					width: 120rpx;
					height: 120rpx;

				}
			}
		}

		.title_box {
			background-color: #fff;

			.tags_box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					padding: 0 20rpx;
					height: 58rpx;
					background: #F2F2FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-right: 10rpx;
					margin-bottom: 20rpx;
				}
			}

			&_btn {
				width: 188rpx;
				height: 58rpx;
				background: #DBF046;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin: 50rpx auto;
			}
		}

		.list_box {
			&_item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				&_label {
					font-size: 24rpx;
					color: #333;
					font-weight: 800;

				}

				&_content {
					margin-top: 10rpx;

					.content_text {

						font-size: 24rpx;
						color: #666666;
					}
				}

			}
		}
	}

	.otherMsg_box {

		&_list {
			&_item {

				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				&_label {
					font-size: 24rpx;
					color: #333;
					font-weight: 800;

				}

				&_content {
					margin-top: 10rpx;

					.content_text {

						font-size: 24rpx;
						color: #666666;
					}
				}


			}
		}
	}

	.briefMsg_box {

		.textarea_box {
			background-color: #fff;
			padding: 20rpx;

			.textarea {
				height: 200rpx;
			}

		}

		&_btn {
			width: 320rpx;
			height: 58rpx;
			background: #DBF046;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			margin: 50rpx auto;
		}
	}
}



.img_model {
	background-color: #fff;

	.imgBox {
		display: flex;
		align-items: flex-end;

		.img_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 18rpx;

			.imgItem {
				// margin-right: auto;

				.imgs {
					width: 106rpx;
					height: 136rpx;
				}

				width: 106rpx;
				height: 136rpx;
				position: relative;

				.icons {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
				}
			}

			.videoItem {
				width: 400rpx;
				height: 300rpx;
				box-sizing: border-box;
				margin: auto;
				position: relative;

				.preview-video {
					width: 400rpx;
					height: 250rpx;
				}

				.icons {
					width: 35rpx;
					height: 35rpx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 9999;
				}
			}

			:deep(.u-upload) {
				flex: 0 !important;
				margin-left: auto;
			}
		}

		.imgUpload {
			width: 106rpx;
			height: 136rpx;
			border-radius: 20rpx;
			border: 2rpx dashed #333;
			margin-left: auto;


		}


	}


}

.btn_box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background-color: #F8F8F8;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	z-index: 9999;

	.center {
		width: 100%;
		text-align: center;
	}

	.btn_left {
		width: 132rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		line-height: 54rpx;
		text-align: center;
	}

	.btn {
		width: 192rpx;
		height: 78rpx;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		line-height: 78rpx;
		font-size: 28rpx;

	}

	.box {
		padding: 20rpx 30rpx 0;
		box-sizing: border-box;
		height: 98rpx;


		.add {
			width: 100%;
			color: #DBF046;
			background-color: #333333;
		}

	}
}
</style>
